@extends('admin.layouts.app')
@section('css')
<link href="{{asset('admin/plugins/dropzone/dropzone.css')}}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=c5dac0d4761d48c299d7d86a9a84458b&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder">
</script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="/js/plupload.full.min.js"></script>

@endsection
@section('content')

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                <h4 class="page-title">点位管理</h4>
                                <ol class="breadcrumb">
                                    <li><a href="{{url('zadmin')}}">系统</a></li>
                                    <li><a href="{{url('zadmin/billboard')}}">点位管理</a></li>
                                    <li class="active">添加点位</li>
                                </ol>
                            </div>
                        </div>
                        
                        <div class="row">
                        	<div class="col-lg-12">
                        		<div class="card-box">
                            <h2 class="m-t-0 header-title">添加点位</h2>
                            <hr/>
                             @if(session('rs'))
                              <div class="alert alert-{{session('rs')['status']}}">
                                {{ session('rs')['msg'] }}
                              </div>
                              @endif
                        			<div class="row">
			                        	<div class="col-md-8">
                                  <form   role="form" action="{{url('zadmin/billboard')}}" id="form1"  method="post">

                                            

                                              <div class="form-group row">
                                                  <label class="control-label col-sm-2">名称</label>
                                                 <div class="col-sm-10">
                                                      <input type="text" class="form-control" name="title" required="" value="{{old('title')}}" placeholder="请输入点位名称">
                                                  </div>    
                                                
                                              </div>
                                             
                                              
                                                      
                                                  
                                             
                                              
            <div class="form-group row">
                <label class="control-label col-sm-2">编号</label>
                <div class="col-sm-10">                                  
                      <input  class="form-control" name="code" placeholder="请输入点位编号" >
                </div>                                  
            </div>

            <div class="form-group row">
                    <label class="control-label col-sm-2">营业时间</label>
                    <div class="col-sm-10">                                                  
                    <input  class="form-control" name="work_time" placeholder="请输入营业时间" >
                  </div>                                         
                                                 
                </div>

                                             
                                               <div class="form-group row">
                                                  <label class="control-label col-sm-2">大包价格</label>
                                                <div class="col-sm-4">  
                                                      <input  class="form-control" name="big_price" >
                                                </div>
                                                <label class="control-label col-sm-2">小包价格</label>
                                                <div class="col-sm-4">  
                                                      <input  class="form-control" name="small_price" >
                                                </div>       
                                                       
                                                 
                                              </div>
     <div class="form-group row">
                <label class="control-label col-sm-2">地址</label>
                <div class="col-sm-8">  
                                                      <input  class="form-control" name="address" placeholder="请从地图中选择点位区域" >
                                                </div> 
                <div class="col-sm-2">
                                                  <button type="button" class="btn btn-primary" id="map">地图</button>
                </div>     
                                                       
                                                 
              </div>                                           
 <div class="form-group row">
                    <label class="control-label col-sm-2">坐标点</label>  
                    <div class="col-sm-10">
                   <input type="text" class="form-control" name="lnglat" id="lnglat" placeholder="请从地图选择坐标点" value="{{old('lnglat')}}">
                 </div>
                </div>
             
               
                 
                
            
              
                <div class="form-group row">
                    <label class="control-label col-sm-2">上传图片</label>
                    <div class="col-sm-10">     
                      <div id="filelist"></div>

                      <div class="piclist"></div>
                                                                   
                    <button class="btn" type="button" id="pickfiles">选择图片</button>
                  </div>
                                                       
                                                 
                </div>
                               
                                                                                                                 
                                  
                                  


                                              <div class="form-group text-center">
                                                  
                                                  <button type="button" class="btn btn-info btn-save">保存</button>
                                              </div>
                                              
                          
                             {{csrf_field()}}
              <input name="pics" id="pics" type="hidden" />              
                                          </form>
                                </div>

                                <div class="col-md-4">
                                                                  
                                </div>

			                        </div>

                             
			                        
                        			
                        		</div>
                                
                            </div> <!-- end col -->

                            
                        </div>
@endsection

@section('modal')  
<div class="modal" tabindex="-1" role="dialog" id="mapModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">选择广告的坐标点</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"  style="height: 400px;">
        <div id="container"></div>
                                    <div id="myPageTop">
                                        <table>
                                            <tr>
                                                <td>
                                                    <label>请输入关键字：</label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input id="tipinput"/>
                                                </td>
                                            </tr>
                                        </table>
                                    </div> 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
       
      </div>
    </div>
  </div>
</div>      
     
    @endsection 
                        
                        
                        

                  
            
      
       

           



    
@section('js')
<script type="text/javascript">
  var pics = '';
  var fields = ['title','code','address','tags','lnglat','show_num'];
 
  $('.btn-save').on('click',function(){
    $.each(fields,function(k,v){
      var item = $('input[name="'+v+'"]');
      if(item.val()=='') {
        alert(item.prop('placeholder'));return false;
      }
    })
    console.info(pics);
    var data = $('#form1').serialize();
   

    var url = '{{url('zadmin/billboard')}}';
    $.post(url,data,function(rs){
      alert(rs.msg);
      if(rs.status == true) {
        window.location.href="{{url('zadmin/billboard')}}";
      }
    });

  })

  $('#rank').on('change',function(){
    $('input[name="tags"]').focus();
  });


       
          var uploader = new plupload.Uploader({
              runtimes : 'html5,flash,silverlight,html4',
              browse_button : 'pickfiles', // you can pass an id...
              container: document.getElementById('container'), // ... or DOM Element itself
              url : '/upload.php',
              flash_swf_url : '../js/Moxie.swf',
              silverlight_xap_url : '../js/Moxie.xap',
              
              filters : {
                max_file_size : '10mb',
                mime_types: [
                  {title : "Image files", extensions : "jpg,gif,png"},
                  {title : "Zip files", extensions : "zip"}
                ]
              },

              init: {
                PostInit: function() {
                  $('#filelist').html('');

                  
                },

                FilesAdded: function(up, files) {
                  plupload.each(files, function(file) {
                    $('#filelist').html('<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>');
                     uploader.start();
                     return false;
                  });
                },

               

                 FileUploaded: function(up, file, info) {
                            // Called when file has finished uploading
                              var rs =  JSON.parse(info.response);
                              if(rs.status){
                                var str = '<img style="padding:5px" src="'+rs.data+'" width="100">';
                                $('.piclist').append(str);
                                pics += rs.data+',';
                                $('#pics').val(pics);
                              }
                              console.info(rs);
                              
                },

                
                 

                
              }
            });

uploader.init();



          $('#map').on('click',function(){
            $('#mapModal').modal('show');
          })
         
            var geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              city: '厦门'
            })

         

          //地图加载
          var marker,map = new AMap.Map("container", {
              resizeEnable: true,
              zoom:12

          });
          //输入提示
          var autoOptions = {
              input: "tipinput"
          };
          var auto = new AMap.Autocomplete(autoOptions);
          var placeSearch = new AMap.PlaceSearch({
              map: map
          });  //构造地点查询类
          AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
          function select(e) {
              placeSearch.setCity(e.poi.adcode);
              placeSearch.search(e.poi.name);  //关键字查询查询
          }

          map.on('click', function(e) {
              markers = map.getAllOverlays('marker');
              if(markers) {
                map.remove(markers)
              }
              console.info(markers);
              document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();

              lnglat = e.lnglat;
              marker = new AMap.Marker({
                  //icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                  position: lnglat,
                  offset: new AMap.Pixel(-13, -30)
              });
              marker.setMap(map);
              geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                  var address = result.regeocode.formattedAddress;
                  $('input[name="address"]').val(address);
              }
            })
          });


        </script>
         

          
       
        @endsection
    
